<template>
    <view>
        <!-- pages/myset/setpaymentcode/index.wxml -->

        <view v-if="active == 1">
            <view class="pad">请输入旧的支付密码</view>
            <padinput id="padinput" @infotan="getpassword($event, { tagId: 'padinput' })" :Value="value"></padinput>
            <button class="btn-area" @tap="toNext">下一步</button>
            <view class="forget" @tap="onAction">忘记支付密码？</view>
        </view>

        <view v-if="active == 2">
            <view class="pad">请输入新的支付密码</view>
            <padinput id="padinput" @infotan="getnewpassword($event, { tagId: 'padinput' })"></padinput>
            <view class="pad">再次输入新的支付密码</view>
            <padinput id="padinput" @infotan="getnewpasswordcoyp($event, { tagId: 'padinput' })" :Value="newpasswordcoyp"></padinput>
            <button class="btn-area" @tap="toConfirm">确定</button>
        </view>

        <view v-if="active == 3">
            <view class="box">
                <!-- <view class="centers h-100 b-t">
      <view class="mr-20">
        <image class="icon-1" src="{{imgUrl + 'verify-1.png'}}"></image>
      </view>
      <view class="centers">
        <text class="text-1">身份证</text>
        <input type="number" bindinput="bindCardInput" placeholder="请输入身份证号码" />
      </view>
    </view> -->
                <view class="centers h-100 b-t">
                    <view class="mr-20 centers">
                        <image class="icon-2" :src="imgUrl + 'verify-2.png'"></image>
                    </view>
                    <view class="centers">
                        <text class="text-1">手机号</text>
                        <input type="number" maxlength="11" @input="bindPhoneInput" placeholder="请输入手机号码" />
                    </view>
                </view>
                <view class="centers h-100">
                    <view class="mr-20 centers">
                        <image class="icon-2" :src="imgUrl + 'verify-3.png'"></image>
                    </view>
                    <view class="centers">
                        <text class="text-1">验证码</text>
                        <input type="number" maxlength="6" @input="bindCodeInput" placeholder="请输入验证码" />
                        <view v-if="btnvisible == true" class="text-2" @tap.stop.prevent="getCode">| 获取验证码</view>
                        <view v-if="btnvisible == false" class="text-3" :disabled="true">{{ count_down }}秒</view>
                    </view>
                </view>
            </view>
            <button class="btn-area" @tap="toNextCode">下一步</button>
        </view>
    </view>
</template>

<script>
// pages/myset/setpaymentcode/index.js
const app = getApp(); // 引入app

import _request from '../../../utils/request.js';
export default {
    data() {
        return {
            imgUrl: app.globalData.imgUrl,

            //全局img路径
            oldpassword: '',

            newpassword: '',
            newpasswordcoyp: '',
            active: 1,
            btnvisible: true,
            count_down: 60,
            code: '',
            cardcode: '',
            bool: false,
            value: '',
            timer: '',
            phone: ''
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {},
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        // 获取密码
        getpassword(e, _dataset) {
            /* ---处理dataset begin--- */
            this.datasetHandle(e, _dataset);
            /* ---处理dataset end--- */
            this.setData({
                oldpassword: e.detail.inputValue
            });
        },

        // 获取新密码
        getnewpassword(e, _dataset) {
            /* ---处理dataset begin--- */
            this.datasetHandle(e, _dataset);
            /* ---处理dataset end--- */
            this.setData({
                newpassword: e.detail.inputValue
            });
        },

        // 获取新密码
        getnewpasswordcoyp(e, _dataset) {
            /* ---处理dataset begin--- */
            this.datasetHandle(e, _dataset);
            /* ---处理dataset end--- */
            this.setData({
                newpasswordcoyp: e.detail.inputValue
            });
        },

        // 获取验证码
        getCode() {
            _request
                .postObj('/storeSms/getPhoneCode', {
                    mobile: this.phone,
                    userId: uni.getStorageSync('userid'),
                    type: 2
                })
                .then((res) => {
                    if (res.data.code === 200) {
                        this.get_code_settime();
                    } else if (res.data.code === 408) {
                        uni.showModal({
                            title: '提示',
                            content: res.data.message,
                            confirmText: '我知道了',
                            showCancel: false
                        });
                    } else {
                        uni.showToast({
                            title: res.data.message || '发送失败, 稍后再试!',
                            icon: 'none'
                        });
                    }
                })
                .catch((error) => {
                    console.log(error, 'error');
                });
        },

        // 下一步
        toNext() {
            const { oldpassword } = this; // 验证密码

            this.setData({
                bool: true,
                value: ''
            });

            _request
                .postObj('/settings/checkPayWord', {
                    userId: uni.getStorageSync('userid'),
                    payWord: oldpassword
                })
                .then((res) => {
                    if (res.data.code === 200) {
                        this.setData({
                            active: 2
                        });
                    } else {
                        uni.showToast({
                            title: res.data.message || '验证失败!',
                            icon: 'error'
                        });
                    }
                })
                .catch((error) => {
                    console.log(error, 'error');
                });
        },

        // 忘记密码
        onAction() {
            uni.setNavigationBarTitle({
                title: '身份验证'
            });
            this.setData({
                active: 3
            });
        },

        // 确认
        toConfirm() {
            const { newpasswordcoyp, newpassword } = this;

            if (newpasswordcoyp !== newpassword) {
                uni.showToast({
                    title: '两次密码输入不一致, 请重新输入',
                    icon: 'none',
                    duration: 2000
                });
                this.setData({
                    newpasswordcoyp: ''
                });
                return;
            } // 修改密码

            _request
                .postObj('/settings/setPaypassword', {
                    userId: uni.getStorageSync('userid'),
                    copyPayword: newpasswordcoyp,
                    payword: newpassword
                })
                .then((res) => {
                    if (res.data.code === 200) {
                        uni.showToast({
                            title: '修改密码成功',
                            icon: 'none',
                            duration: 2000
                        });
                        setTimeout(() => {
                            uni.redirectTo({
                                url: '/pages/myset/index'
                            });
                        }, 1000);
                    } else {
                        uni.showToast({
                            title: res.data.message || '修改失败!',
                            icon: 'none',
                            duration: 2000
                        });
                    }
                })
                .catch((error) => {
                    console.log(error, 'error');
                });
        },

        // 手机号码验证
        toNextCode() {
            const { phone, code } = this;

            if (phone.length < 11 || !phone) {
                uni.showToast({
                    title: '请输入正确手机号',
                    icon: 'none',
                    duration: 2000
                });
            } else if (!code) {
                uni.showToast({
                    title: '请输入验证码',
                    icon: 'none',
                    duration: 2000
                });
            } else {
                _request
                    .postObj('/storeSms/phoneCodeCheck', {
                        userId: uni.getStorageSync('userid'),
                        mobile: this.phone,
                        type: 2,
                        phoneCode: this.code
                    })
                    .then((res) => {
                        if (res.data.code === 200) {
                            uni.setNavigationBarTitle({
                                title: '设置支付密码'
                            });
                            this.setData({
                                active: 2
                            });
                        } else {
                            uni.showToast({
                                title: res.data.message || '验证失败!',
                                icon: 'error'
                            });
                        }
                    })
                    .catch((error) => {
                        console.log(error, 'error');
                    });
            }
        },

        //验证码按钮倒计时方法
        get_code_settime(that) {
            var that = this;
            let countDown = that.data.count_down; //获取倒计时初始值

            that.setData({
                //这里把setInterval复制给变量名timer
                timer: setInterval(function () {
                    // 每隔一秒减1
                    countDown--;
                    that.setData({
                        btnvisible: false,
                        //此处用于隐藏验证码点击按钮，使倒计时显示
                        count_down: countDown //倒计时计数
                    }); //当计数为0时，清空定时器，使验证码按钮再次显示

                    if (countDown == 0) {
                        clearInterval(that.data.timer); //清除timer，

                        that.setData({
                            btnvisible: true,
                            count_down: '60'
                        });
                    }
                }, 1000)
            });
        },

        // 身份证
        bindCardInput() {
            this.setData({
                cardcode: e.detail.value
            });
        },

        // 手机号
        bindPhoneInput(e) {
            this.setData({
                phone: e.detail.value
            });
        },

        // 验证码
        bindCodeInput(e) {
            this.setData({
                code: e.detail.value
            });
        }
    }
};
</script>
<style>
/* pages/myset/setpaymentcode/index.wxss */
.pad {
    margin: 84rpx 0 0 104rpx;
    font-size: 32rx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 44rpx;
    margin-bottom: 60rpx;
}

.b-l {
    border-left: 1rpx solid #ddd;
}

.iptbox {
    width: 88rpx;
    height: 88rpx;
    border-right: 1rpx solid #ddd;
    border-top: 1rpx solid #ddd;
    border-bottom: 1rpx solid #ddd;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.btn-area {
    margin-top: 100rpx;
    width: 670rpx;
    height: 88rpx;
    background: #ff8722;
    border-radius: 44rpx;
    font-size: 32rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ffffff;
    line-height: 88rpx;
    text-align: center;
}

/* .msg {
  margin-top: 40rpx;
  margin-bottom: 84rpx;
} */

.forget {
    margin-top: 60rpx;
    width: 750rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    line-height: 34rpx;
    text-align: center;
}

.box {
    width: 710rx;
    background: #ffffff;
    box-shadow: 1px 1px 4px 1px rgba(241, 241, 241, 0.4);
    border-radius: 10rpx;
    padding: 20rpx 40rpx 20rpx 20rpx;
    box-sizing: border-box;
    margin: 20rpx 20rpx 60rpx 20rpx;
}

.h-100 {
    height: 100rpx;
}
.icon-1 {
    width: 36rpx;
    height: 36rpx;
}

.icon-2 {
    width: 32rpx;
    height: 36rpx;
}

.text-1 {
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    margin-right: 20rpx;
    width: 86rpx;
    display: table;
}

.text-2 {
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ff8722;
    width: 180rpx;
}

.text-3 {
    text-align: center;
    color: #999999;
}

.b-t {
    border-bottom: 1rpx solid #dadada;
}
</style>
